import List from '@mui/material/List';
import { useLocalStorage } from 'react-use';
import { useState, useEffect } from 'react';
import toast from 'react-hot-toast';


import MemoListItem from './MemoListItem';


export default function MemoList({memoTitle}) {
    // const memos = [
    //     {
    //         id: 1,
    //         title: 'Memo 1',
    //         content: 'Memo 1 content',
    //     },
    //     {
    //         id: 2,
    //         title: 'Memo 2',
    //         content: 'Memo 2 content',
    //     },
    //     {
    //         id: 3,
    //         title: 'Memo 3',
    //         content: 'Memo 3 content',
    //     },
    //     {
    //         id: 4,
    //         title: 'Memo 4',
    //         content: 'Memo 4 content',
    //     },
    //     {
    //         id: 5,
    //         title: 'Memo 5',
    //         content: 'Memo 5 content',
    //     },
    //     {
    //         id: 6,
    //         title: 'Memo 6',
    //         content: 'Memo 6 content',
    //     },
    //     {
    //         id: 7,
    //         title: 'Memo 7',
    //         content: 'Memo 7 content',
    //     },
    //     {
    //         id: 8,
    //         title: 'Memo 8',
    //         content: 'Memo 8 content',
    //     },
    //     {
    //         id: 9,
    //         title: 'Memo 9',
    //         content: 'Memo 9 content',
    //     },
    //     {
    //         id: 10,
    //         title: 'Memo 10',
    //         content: 'Memo 10 content',
    //     },
    //     {
    //         id: 11,
    //         title: 'Memo 11',
    //         content: 'Memo 11 content',
    //     },
    //   {
    //       id: 12,
    //       title: 'Memo 12',
    //       content: 'Memo 12 content',
    //   },
    //   {
    //     id: 13,
    //     title: 'Memo 13',
    //     content: 'Memo 13 content',
    // },
    // {
    //     id: 14,
    //     title: 'Memo 14',
    //     content: 'Memo 14 content',
    // },

        

    // ]
    const [memos, setMemos] = useLocalStorage('memos', []);
    const [filteredMemos, setFilteredMemos] = useState(memos);

    useEffect(() => {
        if (!memoTitle) {
            setFilteredMemos(memos);
            return;
        }
        setFilteredMemos(memos.filter(memo => 
            memo.title.toLowerCase().includes(memoTitle.toLowerCase())
        ));
    }, [memoTitle, memos]);

    function handleDeleteMemo(id) {
        setMemos(memos.filter(memo => memo.id !== id));
        toast.error('Memo deleted');
    }
  
  return (
    <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
      {filteredMemos.map((memo) => (
        <MemoListItem key={memo.id} memo={memo} handleDeleteMemo={handleDeleteMemo} />
      ))}
    </List>
  );
}
